﻿<div>

    <script type="text/javascript">
        $(function () {
            var columnFilter = { panelHeight: 100, position: "top" }, t = $("#t1").datagrid({
                title: 'test datagrid',
                width: 1200,
                height: 400,
                method: "get",
                url: "datagrid/datagrid-data.json",
                idField: 'ID',
                remoteSort: false,
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'Code', title: '编号(Code)', width: 120 },
                    { field: 'Name', title: '名称(Name)', width: 140, filter: "livebox" },
                    { field: 'Age', title: '年龄(Age)', width: 120, filterable: false },
                    { field: 'Height', title: '身高(Height)', width: 140, filter: "caps" },
                    { field: 'Weight', title: '体重(Weight)', width: 140, filter: "lower" },
                    { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180 },
                    { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                ]],
                columnFilter: columnFilter,
                enableHeaderClickMenu: false,
                enableHeaderContextMenu: false,
                enableRowContextMenu: false
            });

            $("#Button1").click(function () {
                t.datagrid("setColumnFilter", columnFilter);
            });

            $("#Button2").click(function () {
                t.datagrid("setColumnFilter");  //此处传入 null 亦可
            });

            $("#Button3").click(function () {
                t.datagrid("setColumnFilter", $.extend({}, columnFilter, { position: "top" }));
            });

            $("#Button4").click(function () {
                t.datagrid("setColumnFilter", $.extend({}, columnFilter, { position: "bottom" }));
            });

            $("#Button5").click(function () {
                t.datagrid("showRows", true);     //等效于 t.datagrid("columnFilterSelect", true);
            });

            $("#Button6").click(function () {
                t.datagrid("hideRows", true);     //等效于 t.datagrid("columnFilterSelect", false);
            });

            $("#Button7").click(function () {
                var fields = t.datagrid("getColumnFields", "all"), t1 = $("#Text1"), t2 = $("#Text2"), field = t1.val(), value = t2.val();
                if (!$.array.contains(fields, field)) {
                    $.messager.show("操作提醒", "请输入当前控件中存在的 field 值", "warning");
                    t1.focus();
                    return;
                }
                t.datagrid("columnFilterSelect", { field: field, value: value, selected: true })
            });

            $("#Button8").click(function () {
                var fields = t.datagrid("getColumnFields", "all"), t1 = $("#Text1"), t2 = $("#Text2"), field = t1.val(), value = t2.val();
                if (!$.array.contains(fields, field)) {
                    $.messager.show("操作提醒", "请输入当前控件中存在的 field 值", "warning");
                    t1.focus();
                    return;
                }
                t.datagrid("columnFilterSelect", { field: field, value: value, selected: false })
            });

            $("#Button9").click(function () {
                t.datagrid("columnFilterSelect", { field: "Code", value: [1, 2, 3, 4, 5], selected: true });
            });

            $("#Button10").click(function () {
                t.datagrid("columnFilterSelect", { field: "Name", value: ["汤小祥", "况文娟", "余梦恬", "陈文斌", "曾小莉"], selected: false });
            });
        });
    </script>

    <h2>jEasyUI DataGrid Extensions - 过滤器操作</h2>
    <p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
    <hr />
    <input id="Button1" type="button" value="启用表头过滤器" />
    <input id="Button2" type="button" value="禁用表头过滤器" />
    <input id="Button3" type="button" value="将表头过滤器设置到列标题上方" />
    <input id="Button4" type="button" value="将表头过滤器设置到列标题下方" />
    <input id="Button5" type="button" value="全部选择" />
    <input id="Button6" type="button" value="全部不选" />
    <hr />
    <input id="Button7" type="button" value="选择指定的字段中指定的值" />
    <input id="Button8" type="button" value="不选指定的字段中指定的值" />
    <label for="Text1">请输入字段的 Field 值:</label><input id="Text1" type="text" />
    <label for="Text2">请输入要操作的值:</label><input id="Text2" type="text" />
    <hr />
    <input id="Button9" type="button" value="选中多个值" />该按钮点击后选中 Code 列的 "1, 2, 3, 4, 5" <br /><br />
    <input id="Button10" type="button" value="不选多个值" />该按钮点击后不选 Name 列的 "汤小祥, 况文娟, 余梦恬, 陈文斌, 曾小莉"
    <hr />
    <table id="t1"></table>

</div>